<template>
  <div class="date_wrap">
    <div class="date_img">
      <img src="../../assets/images/date.png" alt="" />
    </div>
    <div class="date_tip">
      <p>本期</p>
      <el-date-picker
        v-model="selectTime"
        type="datetimerange"
        range-separator="-"
        @change="changeDateTime($event)"
        value-format="yyyy-MM-dd HH:mm:ss"
        format="yyyy-MM-dd HH:mm:ss"
        :default-time="['00:00:00']"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        prefix-icon="el-icon-caret-bottom"
      >
      </el-date-picker>
    </div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '最近1小时',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近8小时',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 8)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近1天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近3天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近10天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 10)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
      selectTime: [],
    }
  },
  props: {
    dateTime: Array,
  },
  computed: {},
  watch: {},
  created() {
    this.selectTime = this.dateTime
  },
  methods: {
    changeDateTime(e) {
      this.$emit('change-date-time', e)
    },
    closePage() {
      window.history.go(-1)
    },
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.date_wrap {
  margin: 0px 15px 0 21px;
  display: flex;
  .date_img {
    vertical-align: middle;
    margin-right: 10px;
  }
  .date_tip {
  }
}
</style>
<style lang="scss">
.page-home {
  .el-date-editor--datetimerange.el-input,
  .el-date-editor--datetimerange.el-input__inner {
    width: 320px !important;
  }
  .el-range-editor--medium .el-range-separator {
    line-height: 32px !important;
  }
  .el-date-editor {
    border: 0 !important;
    padding: 0 !important;
    .el-input__icon {
      display: none !important;
    }
  }
  .el-range-input,
  .el-range-separator {
    color: rgba(39, 97, 219, 100) !important;
    font-size: 12px !important;
  }
}
</style>
